<template>
    <div class="dashboard">
        <div class="container">
            <!-- 左侧内容 -->
            <div class="left">
                <div class="panel">
                    <!-- 个人信息 -->
                    <div class="user-info">
                        <img class="avatar" src="../../assets/common/defaultHead.png" alt="">
                        <div class="company-info">
                            <div class="title">
                                江苏传智播客教育科技股份有限公司
                                <span>体验版</span>
                            </div>
                            <div class="depart">庆山 ｜ 传智播客-总裁办</div>
                        </div>
                    </div>
                    <!-- 代办 -->
                    <div class="todo-list">
                        <div class="todo-item">
                            <span>组织总人数</span>
                            <!-- 起始值 终点值  滚动时间 -->
                            <span id="todo1"></span>
                        </div>
                        <div class="todo-item">
                            <span>正式员工</span>
                            <span id="todo2"></span>
                        </div>
                        <div class="todo-item">
                            <span>合同待签署</span>
                            <span id="todo3"></span>
                        </div>
                        <div class="todo-item">
                            <span>待入职</span>
                            <span id="todo4"></span>
                        </div>
                        <div class="todo-item">
                            <span>本月待转正</span>
                            <span id="todo5"></span>
                        </div>
                        <div class="todo-item">
                            <span>本月待离职</span>
                            <span id="todo6"></span>
                        </div>
                        <div class="todo-item">
                            <span>接口总访问</span>
                            <span id="todo7"></span>
                        </div>
                    </div>
                </div>
                <!-- 快捷入口 -->
                <div class="panel">
                    <div class="panel-title">快捷入口</div>
                    <div class="quick-entry">
                        <div class="entry-item">
                            <div class="entry-icon approval"/>
                            <span>假期审批</span>
                        </div>
                        <div class="entry-item">
                            <div class="entry-icon social"/>
                            <span>社保管理</span>
                        </div>
                        <div class="entry-item">
                            <div class="entry-icon role"/>
                            <span>角色管理</span>
                        </div>
                        <div class="entry-item">
                            <div class="entry-icon salary"/>
                            <span>薪资设置</span>
                        </div>
                        <div class="entry-item">
                            <div class="entry-icon bpm"/>
                            <span>流程设置</span>
                        </div>
                    </div>
                </div>
                <!-- 图表数据 -->
                <div class="panel">
                    <div class="panel-title">社保申报数据</div>
                    <div class="chart-container">
                        <div class="chart-info">
                            <div class="info-main">
                                <span>申报人数</span>
                                <span id="chart1"></span>
                            </div>
                            <div class="info-list">
                                <div class="info-list-item">
                                    <span>待申报(人)</span>
                                    <span id="chart2"></span>
                                </div>
                                <div class="info-list-item">
                                    <span>申报中(人)</span>
                                    <span id="chart3"></span>
                                </div>
                                <div class="info-list-item">
                                    <span>已申报(人)</span>
                                    <span id="chart4"></span>
                                </div>
                            </div>
                        </div>
                        <div class="chart">
                            <!-- 图表 -->
                        </div>
                    </div>
                </div>
                <!-- 图表数据 -->
                <div class="panel">
                    <div class="panel-title">公积金申报数据</div>
                    <div class="chart-container">
                        <div class="chart-info">
                            <div class="info-main">
                                <span>申报人数</span>
                                <span id="chart5"></span>
                            </div>
                            <div class="info-list">
                                <div class="info-list-item">
                                    <span>待申报(人)</span>
                                    <span id="chart6"></span>
                                </div>
                                <div class="info-list-item">
                                    <span>申报中(人)</span>
                                    <span id="chart7"></span>
                                </div>
                                <div class="info-list-item">
                                    <span>已申报(人)</span>
                                    <span id="chart8"></span>
                                </div>
                            </div>
                        </div>
                        <div class="chart">
                            <!-- 图表 -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧内容 -->
            <div class="right">
                <!-- 帮助链接 -->
                <div class="panel">
                    <div class="help">
                        <div class="help-left">
                            <div class="panel-title">帮助链接</div>
                            <div class="help-list">
                                <div class="help-block">
                                    <i class="icon-entry"/>
                                    入门指南
                                </div>
                                <div class="help-block">
                                    <i class="icon-help"/>
                                    在线帮助手册
                                </div>
                                <div class="help-block">
                                    <i class="icon-support"/>
                                    联系技术支持
                                </div>
                                <div class="help-block">
                                    <i class="icon-add"/>
                                    添加链接
                                </div>
                            </div>
                        </div>
                        <div class="help-right">
                            <div class="calendar">
                                <!-- <el-calendar /> -->
                                <el-calendar/>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 通知公告 -->
                <div class="panel">
                    <div class="panel-title">通知公告</div>
                    <div class="information-list">
                        <div class="information-list-item">
                            <img src="@/assets/common/img.jpeg" alt="">
                            <div>
                                <p>
                                    <span class="col">朱继柳</span> 发布了
                                                                    第1期“传智大讲堂”互动讨论获奖名单公布
                                </p>
                                <p>2018-07-21 15:21:38</p>
                            </div>
                        </div>
                        <div class="information-list-item">
                            <img src="@/assets/common/img.jpeg" alt="">
                            <div>
                                <p>
                                    <span class="col">朱继柳</span> 发布了
                                                                    第1期“传智大讲堂”互动讨论获奖名单公布
                                </p>
                                <p>2018-07-21 15:21:38</p>
                            </div>
                        </div>
                        <div class="information-list-item">
                            <img src="@/assets/common/img.jpeg" alt="">
                            <div>
                                <p>
                                    <span class="col">朱继柳</span> 发布了
                                                                    第1期“传智大讲堂”互动讨论获奖名单公布
                                </p>
                                <p>2018-07-21 15:21:38</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { numberDance } from '@/utils/numberDance'
import { dashboard } from '@/api/dashboard'

export default {
    created () {
        this.render()
    },
    mounted () {

    },
    data () {
        return {
            data: {}
        }
    },
    methods: {
        async render () {
            const res = await dashboard()
            this.data = res.data.data
            console.log(this.data.providentFund)
            console.log(this.data.socialInsurance)
            this.numberDance()
        },
        numberDance () {
            numberDance({ id: 'todo1', end: this.data.employeeTotal })
            numberDance({ id: 'todo2', end: this.data.regularEmployeeTotal })
            numberDance({ id: 'todo3', end: this.data.contractSignTotal })
            numberDance({ id: 'todo4', end: this.data.toBeEmployed })
            numberDance({ id: 'todo5', end: this.data.toBeConfirmed })
            numberDance({ id: 'todo6', end: this.data.toBeDismissed })
            numberDance({ id: 'todo7', end: this.data.interfaceAccessTotal })
            numberDance({ id: 'chart1', end: this.data.socialInsurance.declarationTotal })
            numberDance({ id: 'chart2', end: this.data.socialInsurance.toDeclareTotal })
            numberDance({ id: 'chart3', end: this.data.socialInsurance.declaringTotal })
            numberDance({ id: 'chart4', end: this.data.socialInsurance.declaredTotal })
            numberDance({ id: 'chart5', end: this.data.providentFund.declarationTotal })
            numberDance({ id: 'chart6', end: this.data.providentFund.toDeclareTotal })
            numberDance({ id: 'chart7', end: this.data.providentFund.declaringTotal })
            numberDance({ id: 'chart8', end: this.data.providentFund.declaredTotal })
        }
    }
}
</script>

<style scoped lang="scss">
.dashboard {
    background: #F5F6F8;
    width: 100%;
    min-height: calc(100vh - 80px);

    ::v-deep .el-calendar-day {
        height: 40px;
    }

    ::v-deep .el-calendar-table__row td, ::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev {
        border: none;
    }

    .date-content {
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
    }

    .date-content .rest {
        color: #FFFFFF;
        border-radius: 50%;
        background: rgb(250, 124, 77);
        width: 20px;
        height: 20px;
        line-height: 20px;
        display: inline-block;
        font-size: 12px;
        margin-left: 10px;
    }

    .date-content .text {
        width: 20px;
        height: 20px;
        line-height: 20px;
        display: inline-block;

    }

    ::v-deep .el-calendar-table td.is-selected .text {
        background: #409EFF;
        color: #FFFFFF;
        border-radius: 50%;
    }

    ::v-deep .el-calendar__header {
        display: none
    }

    .container {
        display: flex;

        .right {
            width: 40%;

            .panel {
                margin-left: 8px;
            }

            :nth-child(1) {
                margin-top: 0;
            }
        }

        .left {
            flex: 1;

            :nth-child(1) {
                margin-top: 0;
            }
        }

        .panel {
            background-color: #FFFFFF;

            margin-top: 8px;
            padding: 20px;

            .panel-title {
                font-size: 16px;
                color: #383C4E;
                font-weight: 500;
            }

            // 用户信息样式
            .user-info {
                display: flex;

                .avatar {
                    width: 48px;
                    height: 48px;
                    border-radius: 12px;
                    background-color: #D9D9D9;
                    line-height: 48px;
                    text-align: center;
                }

                .username {
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 50%;
                    background: #04C9BE;
                    color: #FFFFFF;
                    margin-right: 4px;
                }

                .company-info {
                    margin-left: 10px;
                    height: 48px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .title {
                        color: #383C4E;
                        font-weight: 500;
                        font-size: 16px;
                        font-family: PingFang SC, PingFang SC-Medium;

                        span {
                            font-size: 12px;
                            background: #F5F6F8;
                            text-align: center;
                            padding: 2px 8px;
                            border-radius: 2px;
                            color: #697086;
                        }
                    }

                    .depart {
                        font-size: 14px;
                        color: #697086;
                        font-weight: 400;
                    }
                }
            }

            // 代办样式
            .todo-list {
                margin-top: 10px;
                display: flex;
                flex-wrap: wrap;

                .todo-item {
                    width: 18%;
                    height: 90px;
                    display: flex;
                    flex-direction: column;
                    padding: 10px;
                    justify-content: space-around;

                    :nth-child(1) {
                        color: #697086;
                        font-size: 14px;
                    }

                    :nth-child(2) {
                        color: #383C4E;
                        font-size: 30px;
                        font-weight: 500;
                    }
                }
            }

            // 快捷入口
            .quick-entry {
                margin-top: 16px;
                display: flex;

                .entry-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-left: 60px;

                    &:nth-child(1) {
                        margin-left: 0px;
                    }

                    .entry-icon {
                        width: 40px;
                        height: 40px;
                        border-radius: 10px;
                        background: #F5F6F8;
                        background-size: cover;

                        &.approval {
                            background-image: url('~@/assets/common/approval.png');
                        }

                        &.social {
                            background-image: url('~@/assets/common/social.png');
                        }

                        &.salary {
                            background-image: url('~@/assets/common/salary.png');
                        }

                        &.role {
                            background-image: url('~@/assets/common/role.png');
                        }

                        &.bpm {
                            background-image: url('~@/assets/common/bpm.png');
                        }
                    }

                    span {
                        color: #697086;
                        font-size: 14px;
                        margin-top: 8px;
                    }
                }
            }

            // 图表数据
            .chart-container {
                display: flex;

                .chart-info {
                    width: 240px;
                    margin-top: 10px;

                    .info-main {
                        padding: 10px;
                        display: flex;
                        flex-direction: column;

                        :nth-child(1) {
                            font-size: 14px;
                            color: #697086;
                        }

                        :nth-child(2) {
                            margin-top: 10px;
                            font-size: 30px;
                            color: #04C9BE;
                            font-weight: 500;
                        }
                    }

                    .info-list {
                        background: #F5F6F8;
                        border-radius: 4px;
                        padding: 12px 15px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;

                        .info-list-item {
                            width: 50%;
                            margin-top: 10px;
                            display: flex;
                            flex-direction: column;

                            :nth-child(1) {
                                font-size: 14px;
                                color: #697086;
                            }

                            :nth-child(2) {
                                margin-top: 10px;
                                font-size: 30px;
                                color: #383C4E;
                                font-weight: 500;
                            }
                        }
                    }
                }

                .chart {
                    flex: 1
                }
            }

            // 帮助链接
            .help {
                display: flex;

                .help-left {
                    width: 40%;
                }

                .help-right {
                    flex: 1;
                }

                .help-list {
                    .help-block {
                        background: #F5F6F8;
                        border-radius: 4px;
                        width: 264px;
                        height: 54px;
                        padding: 17px 10px;
                        font-size: 14px;
                        color: #697086;
                        margin-top: 10px;

                        i {
                            width: 14px;
                            height: 14px;
                            display: inline-block;
                            background-size: cover;
                            vertical-align: middle;
                        }

                        i.icon-help {
                            background-image: url("~@/assets/common/help.png");
                        }

                        i.icon-support {
                            background-image: url("~@/assets/common/support.png");
                        }

                        i.icon-add {
                            background-image: url("~@/assets/common/add.png");
                        }

                        i.icon-entry {
                            background-image: url("~@/assets/common/entry.png");
                        }
                    }
                }
            }

            // 通知公告
            .information-list {
                margin-top: 20px;

                .information-list-item {
                    display: flex;
                    align-items: center;
                    margin: 15px 0;

                    img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                    }

                    .col {
                        color: #8A97F8;
                    }

                    div :nth-child(2) {
                        color: #697086;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
</style>
